<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org"
	xmlns:tiles="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org" lang="en">
	<head>
		<meta charset="utf-8" />
		<title>Taxis</title>

		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta name="description" content="" />
		<meta name="author" content="" />

		<!-- basic styles -->

		<script src="../../static/jquery/jquery.min.js" th:src="@{/static/jquery/jquery-2.0.3.min.js}"></script>
		<link href="../../static/bootstrap/css/bootstrap.min.css" th:href="@{/static/bootstrap/css/bootstrap.min.css}" rel="stylesheet" />
		<script src="../../static/bootstrap/js/bootstrap.min.js" th:src="@{/static/bootstrap/js/bootstrap.min.js}"></script>
		<link href="../../static/font-awesome/css/font-awesome.min.css" th:href="@{/static/font-awesome/css/font-awesome.min.css}" rel="stylesheet" />			

		<link href="../../static/jquery/jquery-ui.css" th:href="@{/static/jquery/jquery-ui.css}" rel="stylesheet" />
		<script src="../../static/jquery/jquery-ui.js" th:src="@{/static/jquery/jquery-ui.js}"></script>
	
		<!-- fonts -->

		<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300" th:href="@{'http://fonts.googleapis.com/css?family=Open+Sans:400,300'}" rel="stylesheet" />		
		
		<!-- ace styles -->

		<link href="../../static/custom/ace.min.css" th:href="@{/static/custom/ace.min.css}" rel="stylesheet" />
		<link href="../../static/custom/ace-rtl.min.css" th:href="@{/static/custom/ace-rtl.min.css}" rel="stylesheet" />
		<link href="../../static/custom/ace-skins.min.css" th:href="@{/static/custom/ace-skins.min.css}" rel="stylesheet" />

		<!--[if lte IE 8]>
		  <link href="../../static/custom/ace.min.css" th:href="@{/static/custom/ace-ie.min.css}" rel="stylesheet" />
		<![endif]-->

		<!-- inline styles related to this page -->

		<!-- ace settings handler -->

		<script src="../../static/custom/ace-extra.min.js" th:src="@{/static/custom/ace-extra.min.js}"></script>

		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

		<!--[if lt IE 9]>
		<script src="../../static/custom/html5shiv.js" th:src="@{/static/custom/html5shiv.js}"></script>
		<script src="../../static/custom/respond.min.js" th:src="@{/static/custom/respond.min.js}"></script>
		<![endif]-->
		
	</head>

	<body tiles:fragment="content">	

			<div class="breadcrumbs" id="breadcrumbs">
				<script type="text/javascript">
					try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){}
				</script>
				<ul class="breadcrumb">
					<li>
						<i class="fa fa-home home-icon"></i>								
						<a href='/' th:href="@{/}">Inicio</a>
					</li>
					<li>
						<a href="#">Reserva de Servicios</a>
					</li>
					<li class="active">Servicios Recientes</li>
				</ul><!-- .breadcrumb -->
			</div>
			<div class="page-content">
				<div class="page-header">
					<h1>
						Servicios Recientes
						<small>
							<i class="fa fa-angle-double-right"></i>
							Servicios pendientes y en proceso
						</small>
					</h1>
				</div><!-- /.page-header -->
				<div class="row">
					<div class="col-xs-12">						
						<div class="col-sm-11">		
							<div class="btn-group col-sm-7">
									<a href='/crearServicio' th:href="@{/crearServicio}" class="btn btn-light">Crear</a>
									<button class="btn btn-light" id="btnEditarOrden">Modificar</button>
									<button class="btn btn-light" id="btnCancelarOrden">Cancelar</button>
									<button class="btn btn-light" id="btnImprimir">Imprimir</button>
									<button class="btn btn-light" id="btnExportarExcel">Exportar</button>
									<a href='/historialServicios' th:href="@{/historialServicios}" class="btn btn-light">Historial</a>
									<a href='/' th:href="@{/}" class="btn btn-light">Salir</a>
							</div>
							<div class="col-sm-4">
								<div class="input-group">
									<span class="input-group-btn">
										<button id="botonBuscar" data-toggle="dropdown" class="btn btn-purple btn-sm dropdown-toggle">
											Todos
											<span class="fa fa-search icon-on-right bigger-110"></span>
										</button>

										<ul class="dropdown-menu dropdown-purple">
											<li>
												<a href="#" id="BTodos">Todos</a>
											</li>

											<li>
												<a href="#" id="BTipoServicio">Por tipo de servicio</a>
											</li>

											<li>
												<a href="#" id="BFecha">Por fecha</a>
											</li>

											<li>
												<a href="#" id="BHora">Por hora</a>
											</li>
											
											<li>
												<a href="#" id="BSolicitante">Por persona solicitante</a>
											</li>
											
											<li>
												<a href="#" id="BTCargo">Por cargo solicitante</a>
											</li>
											
											<li>
												<a href="#" id="BPasajero">Por pasajero</a>
											</li>
											
											<li>
												<a href="#" id="BCelular">Por celular pasajero</a>
											</li>
											
											<li>
												<a href="#" id="BOrigen">Por zona de origen</a>
											</li>
											
											<li>
												<a href="#" id="BDestino">Por zona de destino</a>
											</li>
											
											<li>
												<a href="#" id="BMedio">Por medio de reserva</a>
											</li>
											
											<li>
												<a href="#" id="BEstado">Por estado de servicio</a>
											</li>
											
											<li>
												<a href="#" id="BConductor">Por conductor asignado</a>
											</li>
											
											<li>
												<a href="#" id="BNumero">Por n&uacute;mero de reserva</a>
											</li>
										</ul>
									</span>
									<input id="inputBuscar" type="text" class="form-control search-query input-small"/>
								</div>									
							</div>
							<div class="col-sm-1">
								<div class="btn-group">
									<button id="botonLimpiar" class="btn btn-light">Limpiar</button>
								</div>
							</div>
						</div>
						<div class="col-sm-11">	
							<div class="space"></div>
							<div class="table-responsive">							
								<table id="tabla-servicios" class="table table-bordered table-hover table-condensed">
									<thead>
										<tr>
											<th></th>
											<th>
											<i class="fa fa-clock-o bigger-110 hidden-480"></i>
											Fecha
											</th>											
											<th>Hora</th>
											<th>Solicitante</th>
											<th>Cargo</th>
											<th>Pasajero</th>
											<th>Celular</th>
											<th>Tipo Servicio</th>
											<th>Origen</th>
											<th>Destino</th>
											<th>V&iacute;a</th>
											<th>Estado</th>
											<th>Conductor</th>
											<th>Reserva</th>
											<th>Obs</th>
										</tr>
									</thead>
									<tbody>
										<tr th:each="ordenServicio : ${ordenesServicio}">
											<td class="center">
												<label>
													<input type="checkbox" name="chkOrdenes" class="ace" th:value="${ordenServicio.numReserva}"/>
													<span class="lbl"></span>
												</label>
											</td>
											<td th:text="${#dates.format(ordenServicio.fechaServicio, #messages.msg('date.formatFecha'))}">30/12/2013</td>
											<td th:text="${#dates.format(ordenServicio.fechaServicio, #messages.msg('date.formatHora'))}">14:30</td>
											<td th:text="${ordenServicio.solicitante.login}">Akira Antonio Taira</td>
											<td th:text="${ordenServicio.solicitante.perfil.descripcion}">Adm. cliente</td>
											<td th:text="${ordenServicio.pasajero.nombreCompleto}">William Chacon Arana</td>
											<td th:text="${ordenServicio.pasajero.todosTelefonos}">965234211</td>
											<td th:text="${ordenServicio.tipoServicio}">Punto a pto.</td>
											<td th:utext="${ordenServicio.puntoOrigen.zona.nombre} + '&lt;br/&gt;' + ${ordenServicio.puntoOrigen.direccion}">Magdalena 1 <br/> Av. Sucre 873</td>
											<td th:utext="${ordenServicio.destinos.size() != 0} ? ${ordenServicio.destinoUltimo.puntoDestino.zona.nombre} + '&lt;br/&gt;' + ${ordenServicio.destinoUltimo.puntoDestino.direccion}">Comas 1 <br/> Calle Beta Mz. M</td>
											<td th:text="${ordenServicio.medioReserva}">Web</td>
											<td th:text="${ordenServicio.estado}">En proceso</td>
											<td th:text="${ordenServicio.unidadMovil != null} ? ${ordenServicio.unidadMovil.conductor.nombreCompleto} : 'No asignado'">Julio Alcantara Ortiz</td>
											<td th:text="${ordenServicio.numReserva}">73139</td>
											<td th:if="${ordenServicio.observacion}" class="text-center"><i th:title="${ordenServicio.observacion}" data-rel="tooltip" class="fa fa-warning orange bigger-150"></i></td>
											<td th:unless="${ordenServicio.observacion}"></td>
										</tr>
									</tbody>
								</table>
							</div>						
						</div>
						<div id="modal-cancelar" class="modal" tabindex="-1">
							<div class="space"></div>
							<div class="space"></div>
							<div class="space"></div>
							<div class="modal-content col-md-4 col-md-offset-4" >
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal">&times;</button>
									<h4 class="blue bigger">Confirma cancelaci&oacute; de servicio</h4>
								</div>
								<div class="modal-body overflow-visible">
									<div class="row">
										<div class="col-xs-12">				
											<p>&iquest;Desea realmente cancelar la(s) orden(es) de servicio seleccionada(s)?</p>
										</div>
									</div>
								</div>	
								<div class="modal-footer">										
									<button type="button" class="btn btn-sm btn-danger" id="btnConfirmarCancelar">
										<i class="fa fa-times"></i>
										<span>Confirmar</span>
									</button>								
									<button class="btn btn-sm" data-dismiss="modal">											
										Salir
									</button>
								</div>
							</div>
						</div><!-- fin modal -->
					</div>	
				</div>					
			</div><!-- /.page-content -->	
		
		<script src="../../static/custom/jquery.dataTables.min.js" th:src="@{/static/custom/jquery.dataTables.min.js}"></script>
		<script src="../../static/custom/jquery.dataTables.bootstrap.js" th:src="@{/static/custom/jquery.dataTables.bootstrap.js}"></script>
		
		<style type="text/css">
				.dataTables_filter {display: none;}
		</style>
		
		<script type="text/javascript">
		// <![CDATA[

		    var oTable;
		    
		    jQuery.extend( jQuery.fn.dataTableExt.oSort, {
				"date-uk-pre": function ( a ) {
				    var ukDatea = a.split('-');
				    return (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
				},
				
				"date-uk-asc": function ( a, b ) {
				    return ((a < b) ? -1 : ((a > b) ? 1 : 0));
				},
				
				"date-uk-desc": function ( a, b ) {
				    return ((a < b) ? 1 : ((a > b) ? -1 : 0));
				}
			} );
		            
			jQuery(function($) {
				
				var selectB = 'BTodos';
				
				$( "#BTipoServicio" ).click(function() {
					selectB = 'BTipoServicio';
					$("#botonBuscar").html('Por tipo de servicio <span class="fa fa-search icon-on-right bigger-110"></span>');
				});
				
				$( "#BTodos" ).click(function() {
					selectB = 'BTodos';
					$("#botonBuscar").html('Todos <span class="fa fa-search icon-on-right bigger-110"></span>');
				});
				
				$( "#BFecha" ).click(function() {
					selectB = 'BFecha';
					$("#botonBuscar").html('Por fecha <span class="fa fa-search icon-on-right bigger-110"></span>');
				});
				
				$( "#BHora" ).click(function() {
					selectB = 'BHora';
					$("#botonBuscar").html('Por hora <span class="fa fa-search icon-on-right bigger-110"></span>');
				});
				
				$( "#BSolicitante" ).click(function() {
					selectB = 'BSolicitante';
					$("#botonBuscar").html('Por persona solicitante <span class="fa fa-search icon-on-right bigger-110"></span>');
				});
				
				$( "#BTCargo" ).click(function() {
					selectB = 'BTCargo';
					$("#botonBuscar").html('Por cargo solicitante <span class="fa fa-search icon-on-right bigger-110"></span>');
				});
				
				$( "#BPasajero" ).click(function() {
					selectB = 'BPasajero';
					$("#botonBuscar").html('Por pasajero <span class="fa fa-search icon-on-right bigger-110"></span>');
				});
				
				$( "#BCelular" ).click(function() {
					selectB = 'BCelular';
					$("#botonBuscar").html('Por celular pasajero <span class="fa fa-search icon-on-right bigger-110"></span>');
				});
				
				$( "#BOrigen" ).click(function() {
					selectB = 'BOrigen';
					$("#botonBuscar").html('Por zona de origen <span class="fa fa-search icon-on-right bigger-110"></span>');
				});
				
				$( "#BDestino" ).click(function() {
					selectB = 'BDestino';
					$("#botonBuscar").html('Por zona de destino <span class="fa fa-search icon-on-right bigger-110"></span>');
				});
				
				$( "#BMedio" ).click(function() {
					selectB = 'BMedio';
					$("#botonBuscar").html('Por medio de reserva <span class="fa fa-search icon-on-right bigger-110"></span>');
				});
				
				$( "#BEstado" ).click(function() {
					selectB = 'BEstado';
					$("#botonBuscar").html('Por estado de servicio <span class="fa fa-search icon-on-right bigger-110"></span>');
				});
				
				$( "#BConductor" ).click(function() {
					selectB = 'BConductor';
					$("#botonBuscar").html('Por conductor asignado <span class="fa fa-search icon-on-right bigger-110"></span>');
				});
				
				$( "#BNumero" ).click(function() {
					selectB = 'BNumero';
					$("#botonBuscar").html('Por n&uacute;mero de reserva <span class="fa fa-search icon-on-right bigger-110"></span>');
				});
				
				oTable= $('#tabla-servicios').dataTable( {
					"aoColumns": [	
					{ "bSortable": false },
			      	{ "sType": "date-uk" },
			     	 null,
			     	 null,
			     	 null,
			     	 null,
			     	 null,
			     	 null,
			     	 null,
			     	 null,
			     	 null,
			     	 null,
			     	 null,
			     	 null,
			     	{ "bSortable": false }
				],
				"aaSorting": [[1,'desc']],				
				} );
				
				$( "#botonLimpiar" ).click(function() {
					oTable.fnFilter('',1);
					oTable.fnFilter('',2);
					oTable.fnFilter('',3);
					oTable.fnFilter('',4);
					oTable.fnFilter('',5);
					oTable.fnFilter('',6);
					oTable.fnFilter('',7);
					oTable.fnFilter('',8);
					oTable.fnFilter('',9);
					oTable.fnFilter('',10);
					oTable.fnFilter('',11);
					oTable.fnFilter('',12);
					oTable.fnFilter('',13);
					oTable.fnFilter('');
					$("#inputBuscar").val('');					
				});
				
				$("#inputBuscar").keyup(function(){
					if (selectB == 'BTodos')
					{
						oTable.fnFilter( this.value );
					}
					else if (selectB == 'BFecha')
					{
						oTable.fnFilter( this.value, 1);
					}
					else if (selectB == 'BHora')
					{
						oTable.fnFilter( this.value, 2);
					}
					else if (selectB == 'BSolicitante')
					{
						oTable.fnFilter( this.value, 3);
					}
					else if (selectB == 'BTCargo')
					{
						oTable.fnFilter( this.value, 4);
					}
					else if (selectB == 'BPasajero')
					{
						oTable.fnFilter( this.value, 5);
					}
					else if (selectB == 'BCelular')
					{
						oTable.fnFilter( this.value, 6);
					}
					else if (selectB == 'BTipoServicio')
					{
						oTable.fnFilter( this.value, 7);
					}
					else if (selectB == 'BOrigen')
					{
						oTable.fnFilter( this.value, 8);
					}
					else if (selectB == 'BDestino')
					{
						oTable.fnFilter( this.value, 9);
					}
					else if (selectB == 'BMedio')
					{
						oTable.fnFilter( this.value, 10);
					}
					else if (selectB == 'BEstado')
					{
						oTable.fnFilter( this.value, 11);
					}
					else if (selectB == 'BConductor')
					{
						oTable.fnFilter( this.value, 12);
					}
					else if (selectB == 'BNumero')
					{
						oTable.fnFilter( this.value, 13);
					}
					else
					{
						oTable.fnFilter( this.value );
					}
				});
				
				$( "#btnEditarOrden" ).click(function() {
					 var ordenes = $('input[name="chkOrdenes"]:checked', oTable.fnGetNodes()).map(function () {
			  				return this.value;
			 				}).get();
					 if(ordenes.length > 0 && ordenes.length < 2){
						 window.location = "/taxis/modificarServicio?numeroOrden=" + ordenes;
					 } else {
						 alert("Debe seleccionar una orden de servicio");
					 }					 
			  	  });
				
				$( "#btnCancelarOrden" ).click(function() {
					 var ordenes = $('input[name="chkOrdenes"]:checked', oTable.fnGetNodes()).map(function () {
					  				return this.value;
					 				}).get();
					 if(ordenes.length > 0){
						 $('#modal-cancelar').modal('show');						
					 } else {
						 alert("Debe seleccionar al menos una orden de servicio");
					 }					 
			  	  });
				
				$( "#btnConfirmarCancelar" ).click(function() {
					 var ordenes = $('input[name="chkOrdenes"]:checked', oTable.fnGetNodes()).map(function () {
			  				return this.value;
			 				}).get();
					if(ordenes.length > 0){
						window.location = "/taxis/cancelarServicio?numeroOrden=" + ordenes;	
					} else {
						 alert("Debe seleccionar al menos una orden de servicio");
					}	
			  	  });
				
				$( "#btnImprimir" ).click(function() {
					window.open('/taxis/downloadRecientes?type=pdf','_blank');		 
			  	  });
				
				$( "#btnExportarExcel" ).click(function() {					
					window.open('/taxis/downloadRecientes?type=xls');
			  	  });
			})
			// ]]>
		</script>
	</body>
</html>